<template>
    <div class="goodsDetail-shop-description-img">
        <span class="goodsDetail-title-line"></span>
        <span class="goodsDetail-title-name">{{titleBar.title}}</span>
        <span class="goodsDetail-title-line"></span>
    </div>
</template>

<script>
    export default {
        name: "TitleBar",
        props:{
            titleBarProp:Object
        },
        data(){
            return{
                titleBar:{
                    title:'热门活动'
                }
            }
        },
        mounted() {
            this.titleBar = Object.assign({},this.titleBar,this.titleBarProp)
        },
        watch:{
            titleBarProp(val){
                this.titleBar = Object.assign({},this.titleBar,val)
            }
        }
    }
</script>

<style scoped>
    .goodsDetail-shop-description-img {
        height: .5rem;
        background: #f5f5f5;
        display: flex;
        justify-content: center;
        align-items: center; }
    .goodsDetail-title-line {
        height: .01rem;
        background: #ccc;
        display: inline-block;
        width: .5rem; }
    .goodsDetail-title-name{
        color: #333;
        font-size: .15rem;
        padding: 0 .08rem;
    }
</style>